<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <person>
        <template v-slot:header="{fullName}">姓名: {{fullName}}</template>
        <template v-slot:footer="slotProps">年龄: {{slotProps.age}}</template>
      </person>
      <hr/>
      <person>
        <template slot="header" slot-scope="slotProps" >姓名: {{slotProps.fullName}}</template>
        <template slot="footer" slot-scope="slotProps">年龄: {{slotProps.age}}</template>
      </person>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            components:{
                person:{
                    data(){
                        return {
                            fullName:'张三',
                            age:18
                        };
                    },
                    template:`
                       <div>
                          <header><slot name="header" :fullName="fullName"></slot></header>
                          <footer><slot name="footer" :age="age"></slot></footer>
                       </div>
                    `
                }
            }
        });
    </script>
</body>
</html>